সিএসএস৩ বক্স সাইজিং (CSS3 Box Sizing)

Web Development - সিএসএস (CSS) - সিএসএস৩ & এডভান্স সিএসএস (CSS3 & Advance CSS) | NCTB BOOK

একটি এলিমেন্টের মোট উচ্চতা এবং প্রস্থের সাথে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।


এক নজরে বক্স সাইজিং প্রোপার্টি


সিএসএস(৩) বক্স সাইজিং প্রোপার্টি ব্যবহার না করলে কি ঘটে?

এলিমেন্ট এর প্রস্থ এবং উচ্চতা নিম্নের ন্যায় গননা করেঃ

  • প্রস্থ + প্যাডিং + বর্ডার = একটি এলিমেন্টের সম্পূর্ণ প্রস্থ
  • উচ্চতা + প্যাডিং + বর্ডার = একটি এলিমেন্টের সম্পূর্ণ উচ্চতা

অর্থাৎ আপনি যদি box-sizing প্রোপার্টি না ব্যবহার করেন তাহলে একটি এলিমেন্টের সাথে ডিফল্টভাবে বর্ডার ও প্যাডিং যুক্ত হবে এবং আপনার কাংখিত প্রস্থ ও উচ্চতা থেকে ফলাফল ভিন্ন হবে।

নিম্নের উদাহরণে একই উচ্চতা এবং প্রস্থের সাথে প্যাডিং যুক্ত এবং প্যাডিং ব্যতীত দুটি

এলিমেন্ট দেখানো হলোঃ

kt_satt_skill_example_id=1780

তাই দীর্ঘ সময় ধরে ওয়েব-ডেভেলপারদেরকে প্রয়োজনের তুলনায় কম প্রস্থ এবং উচ্চতা নির্ধারণ করতে হত। কারণ তাদেরকে প্যাডিং এবং বর্ডারের মান বাদ দিয়ে হিসাব করতে হত। এই সমস্যার সমাধান হিসেবে সিএসএস(৩) box-sizing প্রোপার্টির উৎপত্তি হয়


সিএসএস(৩) box-sizing প্রোপার্টি

একটি এলিমেন্টের মোট প্রস্থ এবং উচ্চতার মধ্যে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।

আপনি যদি একটি এলিমেন্টে box-sizing: border-box; সেট করেন তাহলে ঐ এলিমেন্টে সেটকৃত সাইজ(width এবং height) এর সাথে প্যাডিং এবং বর্ডারও যুক্ত হবেঃ

kt_satt_skill_example_id=1781

box-sizing: border-box; এর ব্যবহার অনেক বেশি সুবিধাজনক হওয়া অধিকাংশ ডেভেলপার তাদের ওয়েব-পেইজের সকল এলিমেন্টেই এটি ব্যবহার করে থাকে।

ব্রাউজার সাপোর্ট

Content added By
Promotion